<template>
    <div class="box">
        <!-- 面包屑导航区 -->
        <t-breadcrumb :maxItemWidth="'150'">
            <t-breadcrumbItem :to="{ path: '/dashboard' }">首页</t-breadcrumbItem>
            <t-breadcrumbItem>商品管理</t-breadcrumbItem>
            <t-breadcrumbItem :maxWidth="'160'">商品分类</t-breadcrumbItem>
        </t-breadcrumb>

        <!-- 卡片视图区域 -->
        <t-card bordered>
            <t-row>
                <t-col>
                    <t-button theme="primary" @click="showAddCateDialog">添加分类</t-button>
                </t-col>
            </t-row>

            <!-- 表格区域 -->
            <tree-table class="treeTable" :data="cateList" :columns="columns" :selection-type="false" :expand-type="false"
                show-index index-text="#" border :show-row-hover="false">
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i v-if="scope.row.cat_deleted === false" class="iconfont icon-dui1" style="color: lightgreen;"></i>
                    <i v-else class="iconfont icon-cuo" style="color: red;"></i>
                </template>
                <!-- 排序 -->
                <template slot="order" slot-scope="scope">
                    <t-tag v-if="scope.row.cat_level === 0" theme="primary" variant="light">一级</t-tag>
                    <t-tag v-else-if="scope.row.cat_level === 1" theme="success" variant="light">二级</t-tag>
                    <t-tag v-else theme="warning" variant="light">三级</t-tag>
                </template>
                <!-- 操作 -->
                <template slot="opt" slot-scope="scope">
                    <t-space>
                        <t-button theme="primary" size="small" @click="showEditDialog(scope.row.cat_id)"><i
                                class="iconfont icon-bianji"></i>编辑</t-button>
                        <t-button theme="danger" size="small" @click="removeCateById(scope.row.cat_id)"><i class="iconfont icon-shanchu"></i>删除</t-button>
                    </t-space>
                </template>
            </tree-table>


            <!-- 分页区域 -->
            <t-pagination v-model="queryInfo.pagenum" :total="total" :pageSizeOptions="[3, 5, 10, 15]"
                :page-size.sync="queryInfo.pagesize" @current-change="onCurrentChange" @page-size-change="onPageSizeChange"
                show-jumper />
        </t-card>

        <!-- 添加分类的对话框 -->
        <t-dialog header="添加分类" @close="addCateDialogClosed" :footer="false" :visible.sync="addCateDialogVisible">
            <t-form :data="addCateForm" ref="addCateFormRef" :rules="addCateFormRules" @submit="addCate" colon>
                <!-- 添加分类的表单 -->
                <t-form-item label="分类名称" name="cat_name">
                    <t-input v-model="addCateForm.cat_name" placeholder="请输入分类名称" />
                </t-form-item>
                <t-form-item label="父级分类">
                    <!-- options用来指定数据源 -->
                    <!-- keys用来指定配置对象 -->
                    <t-cascader v-model="selectedKeys" value-type="full" :options="parentCateList" :keys="cascaderProps"
                        trigger="hover" @change="parentCateChanged" clearable check-strictly />
                </t-form-item>
                <!-- 按钮区域 -->
                <template>
                    <div style="float: right">
                        <t-space>
                            <t-button theme="default" @click="addCateDialogClosed">取消</t-button>
                            <t-button theme="primary" type="submit">确定</t-button>
                        </t-space>
                    </div>
                </template>
            </t-form>
        </t-dialog>

        <!-- 编辑分类的对话框 -->
        <t-dialog header="编辑分类" @close="editCateDialogClosed" :footer="false" :visible.sync="editCateDialogVisible">
            <t-form :data="editCateForm" ref="editCateFormRef" :rules="editCateFormRules" @submit="editCateInfo" colon>
                <!-- 添加分类的表单 -->
                <t-form-item label="分类名称" name="cat_name">
                    <t-input v-model="editCateForm.cat_name" placeholder="请输入分类名称" />
                </t-form-item>
                <!-- 按钮区域 -->
                <template>
                    <div style="float: right">
                        <t-space>
                            <t-button theme="default" @click="editCateDialogClosed">取消</t-button>
                            <t-button theme="primary" type="submit">确定</t-button>
                        </t-space>
                    </div>
                </template>
            </t-form>
        </t-dialog>

    </div>
</template>

<script>
export default {

    created() {
        // 获取商品分类数据
        this.getCateList()
    },

    data() {
        return {
            // 查询条件
            queryInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5,
            },
            // 商品分类的数据列表，默认为空
            cateList: [],
            // 总数据
            total: 0,
            // 为table指定列的定义
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name',
                    width: 100,
                },
                {
                    label: '是否有效',
                    // 表示将当前列定义为模版列
                    type: 'template',
                    // 表示当前这一列使用的模版名称
                    template: 'isok',
                    width: 100,
                },
                {
                    label: '排序',
                    // 表示将当前列定义为模版列
                    type: 'template',
                    // 表示当前这一列使用的模版名称
                    template: 'order',
                    width: 100,
                },
                {
                    label: '操作',
                    // 表示将当前列定义为模版列
                    type: 'template',
                    // 表示当前这一列使用的模版名称
                    template: 'opt',
                    width: 100,
                }
            ],
            // 控制添加分类对话框的显示与隐藏
            addCateDialogVisible: false,
            // 控制编辑分类对话框的显示与隐藏
            editCateDialogVisible: false,
            // 添加分类的表单数据对象
            addCateForm: {
                // 将要添加的分类的名称
                cat_name: '',
                // 父级分类的Id
                cat_pid: 0,
                // 分类的等级，默认要添加的是1级分类
                cat_level: 0,
            },
            editCateForm: {

            },
            addCateFormRules: {
                cat_name: [
                    {
                        required: true,
                        message: '请输入分类名称',
                        type: 'error',
                        trigger: 'blur',
                    },
                    { whitespace: true, message: '分类名称不能为空' },
                    {
                        min: 2,
                        message: '至少需要两个字符，一个中文等于两个字符',
                        type: 'warning',
                        trigger: 'blur',
                    },
                    {
                        max: 10,
                        message: '分类名称字符长度超出',
                        type: 'warning',
                        trigger: 'blur',
                    },
                ],
            },
            editCateFormRules: {
                cat_name: [
                    {
                        required: true,
                        message: '请输入分类名称',
                        type: 'error',
                        trigger: 'blur',
                    },
                    { whitespace: true, message: '分类名称不能为空' },
                    {
                        min: 2,
                        message: '至少需要两个字符，一个中文等于两个字符',
                        type: 'warning',
                        trigger: 'blur',
                    },
                    {
                        max: 10,
                        message: '分类名称字符长度超出',
                        type: 'warning',
                        trigger: 'blur',
                    },
                ],
            },
            // 父级分类的列表
            parentCateList: [],
            // 指定级联选择器的配置对象
            cascaderProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
            },
            // 选中的父级分类的Id数组
            selectedKeys: [],


        }
    },

    methods: {
        // 获取商品分类数据
        async getCateList() {
            const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
            if (res.meta.status !== 200) {
                this.$message.error('获取商品分类失败！')
            } else {
                // 把数据列表赋值给 cateList
                this.cateList = res.data.result
                // 为总数据条数赋值
                this.total = res.data.total
            }
        },

        // 每页数量切换时触发
        onPageSizeChange(size, pageInfo) {
            this.queryInfo.pagesize = size
            this.getCateList()
        },

        // 页码值切换时触发
        onCurrentChange(current, pageInfo) {
            this.queryInfo.pagenum = current
            this.getCateList()
        },

        // 点击按钮，展示添加分类对话框
        showAddCateDialog() {
            // 先获取父级分类的数据列表
            this.getParentCateList()
            // 再展示出对话框
            this.addCateDialogVisible = true
        },
        // 获取父级分类的数据列表
        async getParentCateList() {
            const { data: res } = await this.$http.get('categories', { params: { type: 2 } })

            if (res.meta.status !== 200) {
                this.$message.error('获取父级分类数据失败！')
            } else {
                this.parentCateList = res.data
            }
        },
        // 选中项发生变化触发这个函数
        parentCateChanged() {
            // 如果 selectedKeys 数组中的 length 大于0，证明选中的父级分类
            // 反之，就说明没有选中任何父级分类
            if (this.selectedKeys.length > 0) {
                // 父级分类的Id
                this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
                // 为当前分类的等级赋值
                this.addCateForm.cat_level = this.selectedKeys.length
            } else {
                // 父级分类的Id
                this.addCateForm.cat_pid = 0
                // 为当前分类的等级赋值
                this.addCateForm.cat_level = 0
            }
        },
        // 点击按钮，添加新的分类
        async addCate({ validateResult, firstError }) {
            if (validateResult === true) {
                const { data: res } = await this.$http.post('categories', this.addCateForm)
                if (res.meta.status !== 201) {
                    this.$message.error('添加分类失败！')
                } else {
                    this.$message.success('添加分类成功！')
                    // 重新获取用户列表数据
                    this.getCateList()
                    // 清空表单数据并隐藏添加用户的对话框
                    this.addCateDialogClosed()
                }
            } else {
                this.$message.warning(firstError);
            }
        },
        // 监听对话框的关闭事件，重置表单数据
        addCateDialogClosed() {
            this.addCateDialogVisible = false
            this.$refs.addCateFormRef.reset()
            this.selectedKeys = []
            this.addCateForm.cat_level = 0
            this.addCateForm.cat_pid = 0
        },
        // 展示编辑分类的对话框
        async showEditDialog(id) {
            const { data: res } = await this.$http.get('categories/' + id)
            if (res.meta.status !== 200) {
                this.$message.error('查询分类信息失败！')
            } else {
                this.editCateForm = res.data
                this.editCateDialogVisible = true
            }
        },
        // 监听修改分类对话框的关闭事件
        editCateDialogClosed() {
            this.editCateDialogVisible = false
            this.$refs.editCateFormRef.reset()
        },

        // 修改分类信息并提交
        async editCateInfo({ validateResult, firstError }) {
            if (validateResult === true) {
                const { data: res } = await this.$http.put('categories/' + this.editCateForm.cat_id, {
                    cat_name: this.editCateForm.cat_name,
                })

                if (res.meta.status !== 200) {
                    this.$message.error('更新分类信息失败！')
                } else {
                    this.$message.success('更新分类信息成功！')
                    // 重新获取用户列表数据
                    this.getCateList()
                    // 隐藏编辑用户的对话框
                    this.editCateDialogVisible = false
                }
            } else {
                this.$message.warning(firstError);
            }
        },

        // 根据Id删除对应的分类信息
        removeCateById(id) {
            // 弹窗询问用户是否删除数据
            const confirmDia = this.$dialog.confirm({
                header: '提示',
                body: '次操作将永久删除该分类，是否继续？',
                confirmBtn: '确定',
                cancelBtn: '取消',
                onConfirm: async ({ e }) => {
                    // console.log('confirm button has been clicked!');
                    // console.log('e: ', e);
                    const { data: res } = await this.$http.delete('categories/' + id)
                    if (res.meta.status !== 200) {
                        this.$message.error('删除分类失败！')
                    } else {
                        this.getCateList()
                        this.$message.success('删除分类成功！')
                        // 请求成功后，销毁弹框
                        confirmDia.destroy();
                    }
                },
                onClose: ({ e, trigger }) => {
                    this.$message.info('已取消删除')
                    // console.log('e: ', e);
                    // console.log('trigger: ', trigger);
                    confirmDia.hide();
                },
            })
        },
    },

}
</script>

<style lang="less" scoped>
.box {
    padding: 15px;

    .treeTable {
        margin-top: 15px;
    }
}
</style>